<template>
  <div>
    <a-form :model="value" :form="form">

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="属性分类">
        <j-dict-select-tag v-model="productAttributeCategoryId" placeholder="请选择属性分类" @change="getProductAttrList" :triggerChange="true" dictCode="pms_product_attribute_category,name,id"/>
      </a-form-item>
      <a-row :gutter="16">
        <a-col :span="12">
      <a-card title="属性">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" v-for="(attr,attrIndex) in selectProductAttr" :key="'attr'+attrIndex" :label="attr.name">
          <a-select v-if="attr.inputType === '1'"
                    v-model="attr.value"
                    style="width: 100%"
                    :getPopupContainer="node => node.parentNode" >
            <a-select-option value="">请选择</a-select-option>
            <a-select-option v-for="(attrStr,attrStrIndex) in attr.inputList.split(',')" :key="attrStrIndex" :value="attrStr">
              {{ attrStr }}
            </a-select-option>
          </a-select>

          <a-input v-if="attr.inputType === '0'" v-model="attr.value" />
        </a-form-item>
      </a-card>
        </a-col>
        <a-col :span="12">
      <a-card title="参数">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" v-for="(param,paramIndex) in selectProductParam" :key="'param'+paramIndex" :label="param.name">
          <a-select v-if="param.inputType === '1'"
                    v-model="param.value"
                    style="width: 100%"
                    :getPopupContainer="node => node.parentNode" >
            <a-select-option value="">请选择</a-select-option>
            <a-select-option v-for="(paramStr,paramStrIndex) in param.inputList.split(',')" :key="paramStrIndex" :value="paramStr">
              {{ paramStr }}
            </a-select-option>
          </a-select>

          <a-input v-if="param.inputType === '0'" v-model="param.value" />
        </a-form-item>
      </a-card>
        </a-col>
      </a-row>
      <a-form-item :md="24" :sm="24" :style="{ textAlign: 'right' }">
        <a-button @click="prevStep">上一步</a-button>
        <a-button style="margin-left: 18px" type="primary" @click="nextStep">下一步</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
  import { getAction } from '@/api/manage'

  export default {
    name: "ProductAttrDetail",
    props: {
      value: Object,
    },
    computed:{
      productAttributeCategoryId:{
        get(){
          if(this.value.productAttributeCategoryId === null)
            this.value.productAttributeCategoryId = '';
          return this.value.productAttributeCategoryId.toString();
        },
        set(v){
          if('' === v || null === v)
            this.value.productAttributeCategoryId = '';
          else
            this.value.productAttributeCategoryId = parseInt(v);
        }
      },
    },
    data () {
      return {
        visible: false,
        model: {},
        //商品属性
        selectProductAttr: [],
        //商品参数
        selectProductParam: [],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 13 },
        },
        confirmLoading: false,
        form: this.$form.createForm(this),
        url: {
          queryAttr: '/pms/pmsProduct/queryAttrById',
        },
      }
    },
    created () {
      if(this.selectProductAttr === null || this.selectProductAttr.length === 0){
        this.selectProductAttr = this.value.attrList;
        //this.selectProductAttr = Object.assign({}, this.value.attrList);
      }
      if(this.selectProductParam === null || this.selectProductParam.length === 0){
        this.selectProductParam = this.value.paramList;
        //this.selectProductParam = Object.assign({}, this.value.paramList);
      }
    },
    methods: {
      nextStep () {
        this.$emit('nextStep')
      },
      prevStep () {
        this.$emit('prevStep')
      },
      getProductAttrList(e) {
        this.value.productAttributeCategoryId = e;

        getAction(this.url.queryAttr,{id:e, productId:this.value.id}).then(res=>{
          this.selectProductAttr = [];
          this.selectProductParam = [];
          if(res.success){
            let list = res.result;
            for (let i = 0; i < list.length; i++) {
              if(this.value.id === undefined || this.value.id === null || this.value.id === '' ){
                list[i].value = '';
              }
              if (list[i].type === '0') {
                this.selectProductAttr.push(list[i]);
              } else {
                this.selectProductParam.push(list[i]);
              }
            }
            this.value.attrList = this.selectProductAttr;
            this.value.paramList = this.selectProductParam;
          }else{
            console.log(res.message);
          }
        });
      },
    }
  }
</script>

<style scoped>

</style>